<template>
	<view class="wapper">
		<view class="top">
			<image src="../../../static/mine/order_bg.png" mode="widthFix" class="order-bg"></image>
			<view class="text-white text-center wait" v-if="orderState == 0">
				<view class="text-xl">等待买家付款</view>
				<view class="text-sm" v-if="!timeText">
					<u-count-down class="count-down-demo"  :timestamp="countDownTime" separator="zh"
					separator-color="#fff" ref="uCountDown" bgColor="'' " :showHours='false'
					 color="#fff" @end="countDownEnd" ></u-count-down>
					自动关闭</view>
				<view v-else>{{timeText}}</view>
			</view>
			<view class="text-white text-center wait" v-if="orderState == 6">
				<view class="text-xl">退款审核中</view>
				<view class="text-sm" v-if="orderDetail.applyTime">申请时间：{{orderDetail.applyTime | date}}</view>
			</view>
			<view class="text-white text-center wait" v-if="orderState == 7">
				<view class="text-xl">退款成功</view>
				<view class="text-sm" v-if="orderDetail.approveTime">审核成功时间：{{orderDetail.approveTime | date}}</view>
			</view>
			<view class="text-white text-center wait" v-if="orderState == 8">
				<view class="text-xl">退款审核失败</view>
				<view class="text-sm" v-if="orderDetail.approveTime">审核失败时间：{{orderDetail.approveTime | date}}</view>
			</view>
			<view class="text-white text-center order-top">
				<view class="text-xl" v-if="orderState == 1">待发货</view>
				<view class="text-xl" v-if="orderState == 2">待提货</view>
				<view class="text-xl" v-if="orderState == 3">订单已完成</view>
				<view class="text-xl" v-if="orderState == 4">订单已关闭</view>
				<view class="text-xl" v-if="orderState == 5">订单已取消</view>
				<view class="text-xl" v-if="orderState == 9">交易已关闭</view>
				<view class="text-xl" v-if="orderState == 11">已撤销退款申请</view>
			</view>
		</view>
		<!-- 地址时间 -->
		<view class="addresss bg-white padding">
			<view class="code text-right color-blue" @click="showCode" v-if="orderState == 2">
				<text class="iconfont icon-erweima"> </text>取货码
			</view>
			<view class="u-f-ac">
				<text class="icon iconfont icon-yizhan11 tit-icon"></text>
				<view class="add-middle">
					<view class="getTitle">自提点: {{addr.pickName || ''}}</view>
					<view class="add align-center">
						<text>{{addr.pickAddr || ''}} {{addr.houseNum || ''}}</text>
					</view>
				</view>
				<view class="flex1 color-blue" @click="navigate">
					<text class="iconfont icon-luxianpeizhi"> </text>导航
				</view>
			</view>
			
		</view>
		<view class="u-f-ac bg-white padding addresss text-liblue">
			<text class="icon iconfont icon-zhiliangguanli tit-icon"></text>
			<view class="add-middle">如有商品缺货少送等问题，可联系团长为您解决</view>
			<view class="flex1" @click="contact"><text class="iconfont icon-dianhua"></text>联系团长</view>
		</view>
		<!-- 商品内容 -->
		<view class="contaner bg-white padding-lr" :class="orderDetail.goodList.lenght>2 ? 'ovh' :'auto'">
			<view class="list" :class="{active:flag}">
				<view class="con-item u-f-ac"v-for="(item,index) in orderDetail.goodList" :key="index">
					<image class="pic" :src="item.picture" mode="widthFix"></image>
					<view class="info-right">
						<view class="name">{{item.title}}</view>
						<view class="u-f-jsb del">
							<view class="text-red">￥{{item.price}}</view>
							<view class="text-red"></view>
							<view class="">X{{item.count}}</view>
						</view>
						<view class="u-f-jse" v-if="orderState == 1 || orderState == 2">
							<view v-if="item.refundType == 1" class="base-btn gray-btn">退款中</view>
							<view v-if="item.refundType == 2" class="base-btn gray-btn">退款成功</view>
							<view v-if="item.refundType == 3" class="base-btn gray-btn">已拒绝</view>
							<view v-if="item.refundType == 4" class="base-btn gray-btn">已撤销申请</view>
							<!-- 审核通过或拒绝或撤销，但是退换的数量 小于 购买的总数量，可以继续退换 -->
							<view v-if="item.refundType !=1 && item.refundType !=0 && (item.refundNum || 0) < item.count " class="base-btn gray-btn"@tap="Route({url:'/pages/mine/order/refund/refund',params:{orderId,goodsItem:encodeURIComponent(JSON.stringify(item)),addr:encodeURIComponent(JSON.stringify(addr)),outTradeNo:orderDetail.outTradeNo,totalPrice:orderDetail.totalPrice}})">继续退换</view>
							<!-- 未申请过，申请退款 -->
							<view class="u-f-jse" v-if="item.refundType == 0">
								<view class="base-btn gray-btn" @tap="Route({url:'/pages/mine/order/refund/refund',params:{orderId,goodsItem:encodeURIComponent(JSON.stringify(item)),addr:encodeURIComponent(JSON.stringify(addr)),outTradeNo:orderDetail.outTradeNo,totalPrice:orderDetail.totalPrice}})">申请退款</view>
							</view>
						</view>
						
					</view>
					
				</view>
			</view>
			<view class="dpay u-f" v-if="orderDetail.dName">
				<image :src="orderDetail.dpicture" mode="aspectFit" class="round"></image>
				<view class="text-bold">代付：<text class="text-red">￥{{orderDetail.totalPrice}}</text></view>
			</view>
			<view class="padding-tb u-fc more" @click="conmore" v-if="orderDetail.goodList.lenght>2 ">
				{{flag?'收起':'展开更多'}}
				<text class="icon iconfont" :class="flag?'icon-icon-arrow-top2':'icon-icon-arrow-bottom2'"></text>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="infoxq bg-white">
			<view class="info-top u-f-jsb">
				<view class="title">订单信息</view>
				<view class="more" v-if="!showMore" @tap="infomore">查看更多<text class="icon iconfont icon-xia"></text></view>
			</view>
			<view class="info-list u-f-jsb">
				<view class="u-f-ac spec">
					<text>订单编号：</text>
					<text>{{orderDetail.orderId}}</text>
				</view>
				<view class="text-red" @tap="clipboard(orderDetail.outTradeNo)">复制</view>
			</view>
			<view class="info-list u-f-ac" v-if="orderDetail.payType">
				<text>支付方式：</text>
				<text>{{orderDetail.payType == 'commission'? '佣金支付' : '微信支付'}}</text>
			</view>
			<view v-if="showMore">
				<view class="info-list u-f-ac">
					<text>创建时间：</text>
					<text>{{orderDetail.createTime | date}}</text>
				</view>
				<view class="info-list u-f-ac" v-if="orderDetail.payTime">
					<text>付款时间：</text>
					<text>{{orderDetail.payTime | date}}</text>
				</view>
			</view>
			<view style="clear: both;"></view>
		</view>
		<!-- 未付款 -->
		<view class="u-f-jse btn-box" v-if="orderState == 0">
			<view class="base-btn gray-btn" @tap="cancelOrDelete(1)">取消订单</view>
			<view class="base-btn red-btn" @tap="pay()">付款</view>
		</view>
		<!-- 订单已待取货 -->
		<view class="u-f-jse btn-box" v-if="orderState == 2">
			<view class="base-btn red-btn" @tap="confirmReceipt">确认收货</view>
		</view>
		<!-- 订单已取消或者订单已关闭 -->
		<view class="u-f-jse btn-box" v-if="orderState == 4 || orderState == 5">
			<view class="base-btn red-btn" @tap="cancelOrDelete(2)">删除订单</view>
		</view>
		<!-- 确定取消 确定删除弹框 -->
		<tui-modal :show="modal1" @click="handleClick1" @cancel="hinde1" title="提示" :content="'确定要' + type==1?'取消':'删除'+'该订单吗？'"></tui-modal>
		<!-- 确认订单弹框 -->
		<tui-modal :show="modal2" @click="handleClick2" @cancel="hinde2" title="提示" content="确定要确认该订单吗？"></tui-modal>
		<!-- 自提码弹框 -->
		<tui-modal :show="modal3" @cancel="hinde3" :custom="true" padding="28rpx" class="code-modal text-center">
			<view class="iconfont icon-cuo" @click="hinde3"></view>
			<view class="text-32 text-bold">请凭二维码提货</view>
			<image :src="orderDetail.qrcode" mode="aspectFit"></image>
			<view class="text-df">订单号 {{orderDetail.outTradeNo}}</view>
		</tui-modal>
	</view>
</template>

<script>
	import gcoord from 'gcoord'
	export default {
		data() {
			return {
				orderState:0,
				flag: false,
				showMore: false,
				memberId:this.$store.state.userInfo.memberId,
				orderId:'',			//订单id
				orderNuber: '',		//订单编号
				orderDetail: {goodList:[]},
				addr:{},			//自提点信息
				countDownTime: 0, 		//倒计时时间，单位秒
				timeText: '',
				type: 0,			//区分 删除2 还是 取消订单1
				modal1: false,
				modal2: false,
				modal3: false
			};
		},
		onLoad(e) {
			this.orderId = e.id
			this.orderState = e.orderState
			this.orderNuber = e.outTradeNo
		},
		onShow() {
			this.getDeatail()
		},
		methods:{
			getDeatail(){
				this.$http.post(`/api/order/details/${this.orderId}/${this.memberId}`).then(res => {
					if(!res.success) return this.$tip.toast(res.msg)
					this.orderDetail = res.data
					this.addr = res.data.addr
					// 如果订单待付款，计算剩余时间进行倒计时
					if(this.orderState == 0){
						let createTime = Date.parse(this.orderDetail.createTime)  + 15*60*1000; // 15分钟过期
						let curTime = Date.parse(new Date());
						this.countDownTime = (createTime - curTime) / 1000 // 秒
						if(this.countDownTime < 0) {this.orderState = 4}
					}
				})
			},
			infomore(){
				this.showMore = true
			},
			conmore(){
				this.flag =!this.flag
			},
			// 联系团长
			contact(){
				uni.makePhoneCall({
				    phoneNumber: this.addr.phone //仅为示例
				});
			},
			// 显示二维码
			showCode(){
				if(this.orderDetail.qrcode) return this.modal3 = true
				// 没有二维码 生成二维码
				this.$http.post(`/api/order/Qqcode/${this.orderDetail.outTradeNo}`).then(res => {
					if(!res.success) return this.$tip.toast(res.msg)
					this.orderDetail.qrcode = res.msg
				})
				this.modal3 = true
			},
			hinde3(){
				this.modal3 = false
			},
			// 路线导航
			navigate(){
				var result = gcoord.transform(
				  [this.addr.longitude, this.addr.latitude],    // 经纬度坐标
				  gcoord.BD09,               // 当前坐标系
				  gcoord.AMap 
				)
				let longitude = result[0]
				let latitude = result[1]
				let plugin = requirePlugin('routePlan');
				let key = 'DM3BZ-HK6WR-N3FWR-WWH2S-FLRBF-KFF5T';  //使用在腾讯位置服务申请的key
				let referer = 'om-mall';   //调用插件的app的名称
				let endPoint = JSON.stringify({  //终点
				    'name': this.addr.pickAddr,
				    'latitude': latitude,
				    'longitude': longitude
				});
				wx.navigateTo({
				    url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				})
			},
			// 倒计时结束
			countDownEnd(){
				this.timeText = '订单已关闭'
				this.orderState = 4
			},
			// 取消 删除订单 start
			cancelOrDelete(type=0){
				this.type = type
				this.modal1 = true
			},
			hinde1(){
				this.modal1 = false
			},
			handleClick1(e){
				this.hinde1()
				// 点击确定
				if(e.index==1){
					let url = this.type == 1 ? `/api/order/cancelOrder/${this.orderNuber}/${this.memberId}`: `/api/order/deleteOrder/${this.orderNuber}/${this.memberId}`
					this.$http.post(url).then(res => {
						this.$tip.successBack(res,1000)
					})
				}
			},
			// 取消 删除订单 end
			
			// 确认订单start
			confirmReceipt(id){
				this.modal2 = true
			},
			hinde2(){
				this.modal2 = false
			},
			handleClick2(e){
				this.hinde2()
				// 点击确定
				if(e.index==1){
					this.$http.post(`/api/order/confirmBtn/${this.orderId}/${this.memberId}`).then(res => {
						this.$tip.successBack(res,1000)
					})
				}
			},
			// 确认订单end
			// 待付款 付款
			pay(){
				this.$http.post(`/api/order/payOrder/${this.orderId}/${this.memberId}`).then(res => {
					// 跳转到支付页
					if(!res.success) return this.$tip.toast(res.msg)
					this.Route({url:'/pages/mine/order/setUp/pay',params:{order:encodeURIComponent(JSON.stringify(res.data))}})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wait {
		position: absolute;
		width: 100%;
		top: 0;
		padding-top: 30rpx;
	}
	.getTitle {
		margin-bottom: 10rpx;
		color: #000000;
		font-size: 30rpx;
		font-weight: bold;
	}
	.wapper {
		padding-bottom: 96rpx;
	}
	.wapper .top {
		font-size: 0;
		.order-bg {
			margin-bottom: 0;
		}
	}
	.wapper .btn-box {
		border-radius: 0;
		margin-bottom: 0;
	}
	.wapper > view{
		margin-bottom: 20upx;
		border-radius: 20upx;
	}
	.btn-white{
		border-radius: 20upx !important;
	}
	// 取货码
	.head{
		// border-top-left-radius: 0 !important;
		// border-top-right-radius: 0 !important;
		align-items: center;
		& > view{
			padding: 20upx 0;
		}
		.text{
			font-size: 24upx;
		}
		.code{
			font-size: 42upx;
			font-weight: bold;
			color: $black-color;
		}
	}
	// 地址
	.addresss{
		.color-blue{
			color: $main-color;
		}
		.code{
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #eee;
		}
		.add{
			color: $uni-text-color;
		}
		.tit-icon{
			color: $main-color!important;
			font-size: 40rpx!important;
			margin-right: 10rpx;
		}
		.add-middle{
			max-width: 70%;
		}
	}
	.text-liblue{
		color: $main-color;
	}
	.flex1{
		flex: 1;
		text-align: right;
	}
	// 商品内容
	.ovh .list{
		height: 470upx;
		overflow: hidden;
	}
	.auto .list{
		overflow: visible !important;
		height: auto !important;
	}
	.active{
		overflow: visible !important;
		height: auto !important;
	}
	.contaner{
		.more{
			align-items: center;
			.icon{
				font-size: 34upx;
			}
		}
		.con-item:not(:first-child){
			border-top: 2upx solid #f2f2f2;
		}
		.con-item{
			width: 100%;
			box-sizing: border-box;
			padding: 30upx 0;
			.pic{
				margin-left: 5upx;
				width: 176upx;
				height: 176upx;
				display: block;
				box-shadow: 0 0 16upx #CCCCCC;
				border-radius: 10upx;
				flex-shrink: 0;
			}
			.info-right{
				justify-content: space-between;
				width: 100%;
				margin-left: 20upx;
				.name{
					font-size: 28upx;
					color: $black-color;
					word-break: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.Spec{
					font-size: 24upx;
					margin: 10upx 0;
					width: 400upx;
					word-break: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}
				.del{
					color: $black-color;
					.text-red{
						font-size: 30upx;
						font-weight: bold;
					}
				}
			}
		}
	}
	// 订单信息
	.infoxq{
		padding-top: 30upx;
		& > view:not(:last-child){
			padding-left: 28upx;
			padding-right: 28upx;
		}
		.info-top{
			margin: 20upx 0 40upx;
			.title{
				font-size: 30upx;
				font-weight: bold;
				color: $black-color;
			}
			.more{
				font-size: 26upx;
				.icon{
					margin-left: 10upx;
					font-size: 34upx;
				}
			}
		}
		.info-list{
			padding-bottom: 30upx;
			font-size: 26upx;
			color: $black-color;
			& > text:first-child{
				width: 166upx;
				color: #666666;
			}
			.spec{
				& > text:first-child{
					width: 166upx;
					color: #666666;
				}
			}
		}
		.phone{
			font-size: 30upx;
			border-top: 2upx solid #f2f2f2;
			padding: 30upx 0;
		}
		.hover-bg{
			background-color: #F2F2F2;
		}
	}
	.dpay{
		justify-content: flex-end;
		padding-bottom: 10rpx;
		image{
			margin-right: 20rpx;
			width: 50rpx;
			height: 50rpx;
		}
	}
	// 二维码弹框
	.code-modal{
		position: relative;
		image{
			width: 300rpx;
			height: 300rpx;
			margin: 28rpx 0;
		}
		.iconfont{
			position: absolute;
			width: 56rpx;
			height: 56rpx;
			top: -96rpx;
			right: 0;
			color: #F9F9F9;
			border: 4rpx solid #F9F9F9;
			border-radius: 100%;
			font-size: 40rpx;
			line-height: 52rpx;
		}
	}
</style>